import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TestLayoutWidget extends StatefulWidget {
  const TestLayoutWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return _LayoutState();
  }
}

class _LayoutState extends State<TestLayoutWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("基础 布局组件 学习使用"),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("最大小宽高的 布局组件 ConstrainedBox"),
            ConstrainedBox(
              constraints: const BoxConstraints(
                  minWidth: 100, minHeight: 200, maxWidth: 200, maxHeight: 300),
              child: Container(
                color: Colors.blueGrey,
                height: 4,
                child: Text("""minWidth: 100,
                               minHeight: 200,
                                maxWidth: 200,
                                maxHeight: 300"""),
              ),
            ),
            Text("给定固定宽高 SizedBox"),
            SizedBox(
              width: 50,
              height: 60,
              child: Container(
                color: Colors.blueGrey,
                height: 4,
                child: Text("""minWidth: 100,
                               minHeight: 200,
                                maxWidth: 200,
                                maxHeight: 300"""),
              ),
            ),
            Text("指定子组件的长宽比 AspectRatio"),
            AspectRatio(
              aspectRatio: 5,
              child: Container(
                color: Colors.blueGrey,
                height: 4,
                child: Text("""minWidth: 100,
                               minHeight: 200,
                                maxWidth: 200,
                                maxHeight: 300"""),
              ),
            ),
            Text("指定最大宽高 LimitedBox"),
            LimitedBox(
              maxHeight: 100,
              maxWidth: 50,
              child: Container(
                color: Colors.blueGrey,
                height: 110,
                child: Text("""minWidth: 100,
                               minHeight: 200,
                                maxWidth: 200,
                                maxHeight: 300"""),
              ),
            ),
            Text("根据父容器宽高的百分比  FractionallySizedBox"),
          ],
        ),
      ),
    );
  }
}
